<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni
				v-if="loadOk"
               ref="mescrollRef"
               @init="mescrollInit"
               :height="height"
               :down="downOption"
               @down="downRefresh"
               :up="upOption"
               @up="getData">
                <view class="wrapper"  :type="type"
                   v-for="(item, index) in datas"
                   :item="item"
                   :index="index"
                   :key="index">
                    <view class="c-name text-show-line-1" >
                        {{ item.PCode }}
                    </view>
                    <view class="main" >
                        <view>销售量：{{item.Qty}}</view>
                        <view>销售额：{{item.Total}}</view>
                        <view>毛利：{{item.IsMaori==1?item.Maori:'-'}}</view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetSaleDetailUserPage } from "@/service/api/erp.js"
export default {
    components: {
        easyProImage,
    },
	computed: {
	    ...mapState("report", ["startDate", "endDate"]),
	},
    data() {
        return {
            downOption: {
                use: false,
            },
            config: {
                title: "商品清单",
                centerSlot: true,
            },
            height: "",
            loadOk: false,
            totalPrice: 0,
			type:2,
            code: '',
			goodcode:'',
			datas:[],
			param: {
			    type: this.type,
			    pageNumber: 0,
			    pageSize: 0,
			},
        }
    },
    onLoad(e) {
        this.type = e.type
        this.code = e.code
        this.goodcode = e.goodcode
        console.log("2222")
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {},
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.height = e - 68 + "px"
                this.loadOk = true
				this.$nextTick(() => {
				    this.refresh()
				})
            })
        },
        //获取列表数据
		getData(page) {
			let param = this.param
			param.pageNumber = page.num
			param.pageSize = page.size
			param.startDate = this.startDate
			param.endDate = this.endDate
			param.type = +this.type
			param.code = this.code
            param.goodcode = this.goodcode
		    GetSaleDetailUserPage(param).then((res) => {
		        if (res.State == 1) {
					this.totalPrice = res.OtherData;
		            this.mescroll.endBySize(res.Data.length, res.RecordAmout)
		            this.datas = this.datas.concat(res.Data)
		            this.allLength = res.RecordAmout
		            this.loadOk = true
		        } else {
		            this.mescroll.endBySize(0, 0)
		            this.easyToast(res.Msg)
		        }
		    })
		},
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
		goCommodity(item){
			// this.easyGoTo("/pages_erp/new-sale/commodity-detail?id="+item.PCode)
		},
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}
.main {
    padding: $app-page-padding;
}
.bottom-bar {
    text {
        font-size: 28rpx;
        font-weight: bold;
    }
    .price {
        color: $app-color-main;
    }
}
.cost-item {
    display: flex;
    justify-content: space-between;
    border-bottom: #ebebeb solid 1px;
    padding: 32rpx 60rpx 32rpx 0;
    margin-left: 48rpx;
    text-align: center;

    .left-wrapper,
    .right-wrapper {
        display: flex;
        flex: 1;
    }

    .right-wrapper {
        display: flex;
        justify-content: space-between;
        padding-left: 48rpx;
        .sale-money {
            margin-right: 24rpx;
        }
    }

    .c-name {
        flex: 1;
        word-break: break-all;
        text-align: left;
        margin-left: 48rpx;
        font-size: $size-28;
    }
    .c-turnover {
        .sum {
            font-size: $size-28;
        }
        .total {
            font-size: $size-24;
            color: $color-gray-3;
        }
    }
    .c-profit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        .perc {
            width: 136rpx;
            height: 46rpx;
            line-height: 46rpx;
            font-size: $size-28;
            background: #fff7eb;
            color: #ef9604;
        }
    }
}

	.wrapper{
		background: $color-white;
		border-radius: 24rpx;
		padding: 24rpx;
        margin-bottom: 24rpx;
		.between{
			display: flex;
			justify-content: space-between;
		}
		.c-name{
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}
		.main{
			background: #F5F5F5;
			border-radius: 12rpx;
			padding: 24rpx 32rpx 8rpx 32rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			position: relative;
			view{
				width: 50%;
				font-size:28rpx;
				padding-bottom: 16rpx;
			}
			.more{
				position: absolute;
				right: 0;
				top: 40%;
			}
		}
	}

</style>
